<template>
  <div class="purchase-order table-theme">
    <head-title title="财务--余额明细"></head-title>
    <el-card>
      <div class="data-filtering-view" style="margin-top: 0;">
        <div class="data-filtering-left">
          <el-select v-model="type" placeholder="明细类型" @change="filter" clearable style="width: 150px; margin-right: 15px;">
            <el-option label="充值" :value="1"></el-option>
            <el-option label="扣款" :value="2"></el-option>
            <el-option label="订单消费" :value="3"></el-option>
            <el-option label="退款" :value="4"></el-option>
          </el-select>
          <el-select v-model="trade_type" placeholder="扣款类型" @change="filter" clearable style="width: 150px; margin-right: 15px;">
            <el-option label="售后" :value="1"></el-option>
            <el-option label="差价" :value="2"></el-option>
            <el-option label="商家违规" :value="3"></el-option>
            <el-option label="订单付款" :value="4"></el-option>
            <el-option label="其他" :value="5"></el-option>
          </el-select>
          <p>请选择</p>
          <div class="select-view">
            <el-date-picker
              @change="selectTime"
              v-model="time"
              type="daterange"
              align="right"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              :picker-options="pickerOptions"
              value-format="yyyy-MM-dd"
            ></el-date-picker>
          </div>
        </div>
        <div class="data-filtering-right">
          <search-view
            :option="searchOption"
            @value="goSearch"
            @clear="refreshPage"
          ></search-view>
          <refresh-button @refresh="refreshPage"></refresh-button>
        </div>
      </div>
      <el-table :data="list" stripe style="margin-top: 20px">
        <el-table-column
          label="序号"
          align="center"
          prop="store_money_detail_id"
          width="80"
        ></el-table-column>
        <el-table-column
          label="店铺编号"
          prop="store_id"
          width="80"
        ></el-table-column>
        <el-table-column
          label="店铺名称"
          align="center"
          prop="store_name"
          min-width="200"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          label="关联订单号"
          align="center"
          width="165"
          prop="order_sn"
        ></el-table-column>
        <el-table-column
          label="明细类型"
          align="center"
          prop="type_name"
          width="130"
        ></el-table-column>
        <el-table-column
          label="交易类型"
          align="center"
          prop="trade_type_name"
          width="130"
        ></el-table-column>
        <el-table-column
          label="说明"
          align="center"
          width="200"
          prop="brief"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column label="变动金额" align="center" min-width="140">
          <template slot-scope="scope">
            {{ scope.row.money }}元
          </template>
        </el-table-column>
        <el-table-column label="凭证" align="center" min-width="370">
          <template slot-scope="scope">
            <template v-if="scope.row.voucher_img && scope.row.voucher_img.length">
              <el-image :src="data" v-for="(data, index) in scope.row.voucher_img" :key="index"
                style="width: 60px; height: 60px; margin: 0 5px;"
                :preview-src-list="scope.row.voucher_img"></el-image>
            </template>
          </template>
        </el-table-column>
        <el-table-column
          label="操作员"
          align="center"
          prop="create_by"
          width="165"
        ></el-table-column>
        <el-table-column
          label="提交时间"
          align="center"
          prop="add_time"
          width="165"
        ></el-table-column>
      </el-table>
      <div class="pages">
        <el-pagination
          background
          layout="prev, pager, next, jumper"
          :total="total"
          @current-change="init"
          :current-page.sync="page"
        ></el-pagination>
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now();
        },
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
      time: [],
      searchOption: [
        {
          value: 0,
          label: "店铺编号",
          key: 'store_id',
        },
        {
          value: 1,
          label: "店铺名称",
          key: 'store_name',
        },
        {
          value: 2,
          label: "关联订单号",
          key: 'order_sn',
        },
        {
          value: 3,
          label: "操作员",
          key: 'create_by',
        },
      ],
      type: '',
      trade_type: '',
      searchType: "",
      searchContent: "",
      page: 1,
      total: 0,
      list: [],
    };
  },
  mounted(){
    this.init()
  },
  methods: {
    selectTime() {
      this.page = 1;
      this.init();
    },
    filter(){
      this.page = 1;
      this.init();
    },
    init() {
      let data = {
        page: this.page - 1,
        type: this.type,
        trade_type: this.trade_type,
        start_time: this.time && this.time.length?this.time[0]:'',
        end_time: this.time && this.time.length?this.time[1]:'',
      }
      if(this.searchType!==''){
        data[this.searchOption[this.searchType].key] = this.searchContent
      }
      this.$http(this.$ApiList.BalanceDetail,data).then(res => {
        if(res.code==200){
          this.list = res.datas.data
          this.total = res.datas.count
        }
      })
    },
    goSearch(searchType, searchContent) {
      this.searchType = searchType;
      this.searchContent = searchContent;
      this.page = 1;
      this.init();
    },
    // 刷新
    refreshPage() {
      this.searchType = 0;
      this.searchContent = "";
      this.page = 1;
      this.init();
    },
    cancel(row){
      this.$confirm('是否确认作废此扣款单', "温馨提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        dangerouslyUseHTMLString: true,
      })
        .then(() => {
          this.$http(this.$ApiList.DeductionCancel,{id: row.id}).then(res => {
            this.$layer.msg('作废成功')
            this.init()
          })
        })
        .catch(() => {
          // 取消
        });
    },
  },
};
</script>

<style lang="scss">
.vl-notify{
	z-index: 10000;
}
</style>
<style lang="scss" scoped>
.order_list_head {
  display: flex;
}
.type-view {
  display: flex;
  flex: 1;
  min-width: 0;
}
.type-view .client-item {
  margin-right: 40px;
  line-height: 40px;
  color: rgba(153, 153, 153, 1);
  cursor: pointer;
}
.client-item-active {
  color: #333333 !important;
  border-bottom: 4px solid #34a1e0;
}
.data-filtering-view {
  margin-top: 30px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  .data-filtering-left {
    display: flex;
    align-items: center;
    flex: 1;
    min-width: 0;
    .select-view {
      margin-left: 10px;
    }
  }
  .data-filtering-right {
    display: flex;
    align-items: center;
  }
}
.storage-info{
  line-height: 30px;
  margin-bottom: 15px;
  font-size: 12px;
  p{
    color: #333;
    font-weight: bold;
    span{
      font-weight: normal;
      color: #888;
    }
  }
}
.upload-box {
	// padding-left: 40px;

	.goods-img-upload {
		display: flex;

		.goods-img-upload-imgs {
			flex: 1;
			align-items: flex-start;

			.el-image {
				width: 140px;
				height: 140px;
				border: solid 1px #e5e5e5;
				margin-left: 25px;
				vertical-align: top;
			}
		}

		.goods-img-upload-imgs-info {
			width: 100%;
			max-width: 660px;
			border: solid 1px #e5e5e5;
			margin-left: 25px;
			min-height: 390px;

			.goods-img-upload-imgs-info-box {
				position: relative;

				.el-icon-error {
					position: absolute;
					font-size: 20px;
					color: #ef3030;
					right: 5px;
					top: 5px;
					z-index: 1;
					background-color: #fff;
					border-radius: 50%;
					cursor: pointer;
				}
			}

			.el-image {
				width: 100%;
				vertical-align: top;
			}
		}

		.vice_big_box {
			position: relative;
			display: inline-block;
			vertical-align: top;
			margin-bottom: 20px;

			.el-icon-error {
				position: absolute;
				font-size: 20px;
				color: #ef3030;
				right: 5px;
				top: 5px;
				z-index: 1;
				background-color: #fff;
				border-radius: 50%;
				cursor: pointer;
			}
		}
	}
}
</style>